<template>
  <transition-group appear :name="listName" :tag="tagEle" @enter="enter">
    <slot></slot>
  </transition-group>
</template>

<script>
export default {
  name: 'DproSlideInViewList',
  props: {
    /**
     * 指定当前选中的条目
     */
    listName: {
      type: String,
      default: 'list'
    },
    list: {
      type: Array,
      default: () => []
    },
    /**
     * options 数据，如果设置则不需要手动构造 selectOption 节点
     * array<{value, label, [disabled, key, title]}>
     */
    tagEle: {
      type: String,
      default: 'div'
    },
  },
  data () {
    return {
      ind: 0
    }
  },
  watch: {
    // 父组件控制隐藏时移除点击事件监听
    _placementVisible (val) {

    }
  },
  methods: {
    enter (el) {
      let delay = this.ind
      this.ind += 0.1
      el.style.animation = 'slide-in 0.3s both'
      // el.style.animationDelay = `${(delay).toFixed(1)}s`
      if(el.dataset.index==this.list.length-1) this.ind = 0
    }
  }
}
</script>

<style lang="less">
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>